<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统 - 首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{% static 'admin/style/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'admin/style/index.css' %}"/>
    <script src="{% static 'admin/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'admin/js/jquery.min.js' %}"></script>
</head>
<body>
<div id="title" class="row">
    <div class="col-3" id="title_left" onclick="reload()">超维度商城后台管理系统</div>
    <div class="col-5"></div>
    <div class="col-4" id="title_right">
        <div id="logout">
            <a href="/admin/auth/logout">退出登录</a>
        </div>
        <div id="icon" onclick="openUpload()">
            <img src="{{request.session.admin_user.user_icon}}" alt="">
            <div id="uploadView">
                <img src="#" id="uploadIcon">
                <input onchange="preUpload()" class="form-control form-control-sm" accept="image/*" type="file"
                       id="formFileDisabled">
                <div style="text-align: center;margin-top: 5px">
                    <button type="button" onclick="cloneUpload(this)" class="btn btn-primary"
                            style="margin-right: 10px">关闭
                    </button>
                    <button type="button" onclick="submitUpload(this)" class="btn btn-primary"
                            style="margin-left: 10px">提交
                    </button>
                </div>
            </div>
        </div>
        <div id="name">
            <span>管理员：{{request.session.admin_user.nick_name}}</span>
        </div>
    </div>
</div>
<div id="body" class="row">
    <div id="menus" class="col-2" style="background: rgb(48,65,86)">
        <!--        <div class="menu">-->
        <!--            <a href="/admin" target="content">首页</a>-->
        <!--        </div>-->
    </div>
    <div id="iframe" class="col-10">
        <iframe id="content" name="content"></iframe>
    </div>
</div>
</body>
<script>
    loadMenu()

    //加载页面
    function loadMenu() {
        $.getJSON(
            "menu/getAll/",
            function (res) {
                if (res.code === 200) {
                    let menus = res.data
                    for (let i = 0; i < menus.length; i++) {
                        let menuData = menus[i]
                        let menu = document.createElement('div');
                        menu.className = 'menu'
                        menu.style.background = "rgb(48,65,86)";
                        menu.style.color = "rgb(191,203,217)"
                        menu.setAttribute('data-id', menuData.id)
                        menu.addEventListener('click', openChildMenus)
                        if (menuData.menu_type == 1) {
                            let i = document.createElement('i')
                            i.className = "bi bi-caret-right-fill"
                            i.id = "i-" + menuData.id
                            i.setAttribute('data-id', menuData.id)
                            menu.append(i)
                            let span = document.createElement('span')
                            span.textContent = menuData.menu_name
                            span.setAttribute('data-id', menuData.id)

                            menu.append(span)
                        } else {
                            let a = document.createElement('a')
                            a.href = menuData.menu_url
                            a.text = menuData.menu_name
                            a.style.color = "rgb(191,203,217)"
                            a.target = 'content'
                            menu.append(a)
                        }

                        document.getElementById('menus').append(menu)
                        if (menuData.child_menus.length != 0) {
                            for (let j = 0; j < menuData.child_menus.length; j++) {
                                let childMenu = document.createElement('div');
                                let childMenuData = menuData.child_menus[j];
                                childMenu.className = 'child-menu parent-' + childMenuData.parent_id
                                childMenu.style.background = "rgb(31,45,61)"
                                childMenu.style.color = "rgb(255,255,255)"
                                let a = document.createElement('a')
                                a.href = childMenuData.menu_url
                                a.text = childMenuData.menu_name
                                a.style.color = "rgb(191,203,217)"
                                a.target = 'content'
                                childMenu.append(a)
                                document.getElementById('menus').append(childMenu)
                            }

                        }
                    }
                } else {
                    alert(res.message)
                }
            }
        )
    }

    //打开二级菜单
    function openChildMenus(obj) {
        let parentId = obj.target.getAttribute('data-id');
        $(".bi").attr('class', 'bi bi-caret-right-fill')
        $("#i-" + parentId).attr('class', 'bi bi-caret-down-fill')
        $(".child-menu").css("display", 'none')
        $(".parent-" + parentId).css("display", 'block')
    }

    //刷新页面
    function reload() {
        window.location.reload()
    }

    //打开上传头像
    function openUpload() {
        $("#uploadView").css('display', 'block')
    }

    //头像预上传
    function preUpload() {
        let img = document.getElementById("formFileDisabled")
        let fileName = img.files[0].name;//上传的文件名称
        let file = img.files[0];//上传的文件
        //文件base64string获取
        if (window.FileReader) {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                let base64String = e.target.result;
                $("#uploadIcon").attr('src', base64String);
            };
        }
    }

    //关闭头像上传
    function cloneUpload(obj) {
        $("#formFileDisabled").val("")
        $("#uploadIcon").attr('src', '#')
        $("#uploadView").css({'display': 'none'})
        // 阻止冒泡，否则会继续执行父级的点击事件
        window.event ? window.event.cancelBubble = true : obj.stopPropagation();
    }

    //提交头像
    function submitUpload() {
        let img = $("#uploadIcon").attr('src')
        if (img !== '' && img !== '#') {
            $.post(
                'user/update/icon/',
                {
                    'id': '{{request.session.admin_user.id}}',
                    'img': img
                },
                function (res) {
                    if (res.code === 200) {
                        alert('上传成功！')
                        window.location.reload()
                    } else {
                        alert(res.msg)
                        reload()
                    }
                }, 'json'
            )
        } else {
            alert('请先选择文件！')
        }
    }
</script>
</html>
